React Server Actions: Uproszczone Przetwarzanie Formularzy po Stronie Serwera

React Server Actions, wprowadzone w React 18 i znacznie ulepszone w Next.js, oferują rewolucyjne podejście do obsługi przesyłania formularzy i mutacji danych bezpośrednio na serwerze. Ta potężna funkcja upraszcza proces tworzenia, zwiększa bezpieczeństwo i poprawia wydajność w porównaniu z tradycyjnym pobieraniem i manipulowaniem danymi po stronie klienta.

Czym są React Server Actions?

Server Actions to asynchroniczne funkcje, które działają na serwerze i mogą być wywoływane bezpośrednio z komponentów React. Pozwalają one wykonywać zadania po stronie serwera, takie jak:

• Przesyłanie Formularzy: Bezpieczne przetwarzanie danych formularzy na serwerze.
• Mutacje Danych: Aktualizacja baz danych lub zewnętrznych API.
• Uwierzytelnianie: Obsługa logowania i rejestracji użytkowników.
• Logika po Stronie Serwera: Wykonywanie złożonej logiki biznesowej bez udostępniania jej klientowi.

Kluczową zaletą Server Actions jest to, że umożliwiają pisanie kodu po stronie serwera wewnątrz komponentów React, eliminując potrzebę oddzielnych ścieżek API i złożonej logiki pobierania danych po stronie klienta. To współlokalizowanie interfejsu użytkownika i logiki po stronie serwera prowadzi do bardziej łatwego w utrzymaniu i wydajnego kodu.

Korzyści z Używania React Server Actions

Używanie React Server Actions zapewnia kilka istotnych korzyści:

Uproszczone Tworzenie

Server Actions redukują ilość kodu szablonowego, umożliwiając obsługę przesyłania formularzy i mutacji danych bezpośrednio w komponentach React. Eliminuje to potrzebę oddzielnych punktów końcowych API i złożonej logiki pobierania danych po stronie klienta, usprawniając proces tworzenia i czyniąc kod łatwiejszym do zrozumienia i utrzymania. Rozważmy prosty formularz kontaktowy. Bez Server Actions potrzebna byłaby oddzielna ścieżka API do obsługi przesyłania formularza, JavaScript po stronie klienta do wysyłania danych oraz logika obsługi błędów zarówno po stronie klienta, jak i serwera. Dzięki Server Actions wszystko to można obsłużyć w samym komponencie.

Zwiększone Bezpieczeństwo

Uruchamiając kod na serwerze, Server Actions zmniejszają powierzchnię ataku aplikacji. Wrażliwe dane i logika biznesowa są przechowywane z dala od klienta, uniemożliwiając złośliwym użytkownikom manipulowanie nimi. Na przykład dane uwierzytelniające bazy danych lub klucze API nigdy nie są ujawniane w kodzie po stronie klienta. Wszystkie interakcje z bazą danych odbywają się na serwerze, zmniejszając ryzyko wstrzyknięcia SQL lub nieautoryzowanego dostępu do danych.

Poprawiona Wydajność

Server Actions mogą poprawić wydajność, zmniejszając ilość JavaScript, która musi zostać pobrana i wykonana na kliencie. Jest to szczególnie korzystne dla użytkowników na urządzeniach o małej mocy lub z wolnym połączeniem internetowym. Przetwarzanie danych odbywa się na serwerze, a tylko niezbędne aktualizacje interfejsu użytkownika są wysyłane do klienta, co skutkuje szybszym ładowaniem stron i płynniejszym działaniem.

Optymistyczne Aktualizacje

Server Actions płynnie integrują się z Suspense i Transitions w React, umożliwiając optymistyczne aktualizacje. Optymistyczne aktualizacje pozwalają na natychmiastową aktualizację interfejsu użytkownika, nawet zanim serwer potwierdzi działanie. Zapewnia to bardziej responsywne i angażujące wrażenia użytkownika, ponieważ użytkownicy nie muszą czekać na odpowiedź serwera, aby zobaczyć wyniki swoich działań. W e-commerce dodanie produktu do koszyka może być wyświetlane natychmiast, podczas gdy serwer potwierdza dodanie w tle.

Progresywne Ulepszanie

Server Actions obsługują progresywne ulepszanie, co oznacza, że aplikacja może nadal działać, nawet jeśli JavaScript jest wyłączony lub nie uda się go załadować. Gdy JavaScript jest wyłączony, formularze będą przesyłane jako tradycyjne formularze HTML, a serwer obsłuży przesłanie i przekieruje użytkownika na nową stronę. Zapewnia to, że aplikacja pozostaje dostępna dla wszystkich użytkowników, niezależnie od konfiguracji przeglądarki lub warunków sieciowych. Jest to szczególnie ważne dla dostępności i SEO.

Jak Używać React Server Actions

Aby używać React Server Actions, należy korzystać z frameworka, który je obsługuje, takiego jak Next.js. Oto przewodnik krok po kroku:

1. Zdefiniuj Server Action

Utwórz asynchroniczną funkcję, która będzie uruchamiana na serwerze. Funkcja ta powinna obsługiwać logikę, którą chcesz wykonać na serwerze, na przykład aktualizację bazy danych lub wywołanie API. Oznacz funkcję dyrektywą "use server" na górze, aby wskazać, że jest to Server Action. Ta dyrektywa informuje kompilator React, aby traktował funkcję jako funkcję po stronie serwera i automatycznie obsługiwał serializację i deserializację danych między klientem a serwerem.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

Wyjaśnienie:

• Dyrektywa 'use server' oznacza tę funkcję jako Server Action.
• revalidatePath('/') czyści pamięć podręczną trasy, zapewniając pobranie zaktualizowanych danych przy następnym żądaniu. Jest to kluczowe dla utrzymania spójności danych.
• saveMessage(message) to symbol zastępczy dla rzeczywistej logiki interakcji z bazą danych. Zakłada się, że masz zdefiniowaną gdzie indziej funkcję saveMessage do obsługi zapisywania wiadomości w bazie danych.
• Funkcja zwraca obiekt stanu, który może być używany do wyświetlania informacji zwrotnych użytkownikowi.

2. Zaimportuj i Użyj Server Action w Swoim Komponencie

Zaimportuj Server Action do swojego komponentu React i użyj go jako prop action w elemencie formularza. Hook useFormState może być używany do zarządzania stanem formularza i wyświetlania informacji zwrotnych użytkownikowi.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Wyjaśnienie:

• Dyrektywa 'use client' określa, że jest to komponent klienta (ponieważ używa useFormState).
• useFormState(createMessage, {message: ''}) inicjuje stan formularza za pomocą Server Action createMessage. Drugi argument to stan początkowy.
• Prop action elementu form jest ustawiony na formAction zwracany przez useFormState.
• Zmienna state zawiera wartość zwrotną z Server Action, która może być używana do wyświetlania informacji zwrotnych użytkownikowi.

3. Obsługa Danych Formularza

Wewnątrz Server Action możesz uzyskać dostęp do danych formularza za pomocą API FormData. To API zapewnia wygodny sposób dostępu do wartości pól formularza.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}
            

              
                Copy
              
            
          

4. Obsługa Błędów

Użyj bloków try...catch, aby obsługiwać błędy, które mogą wystąpić podczas wykonywania Server Action. Zwróć komunikat o błędzie w obiekcie stanu, aby wyświetlić go użytkownikowi.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

5. Ponowna Walidacja Danych

Po pomyślnej mutacji danych przez Server Action może być konieczne ponowne sprawdzenie poprawności pamięci podręcznej danych, aby upewnić się, że interfejs użytkownika odzwierciedla najnowsze zmiany. Użyj funkcji revalidatePath lub revalidateTag z next/cache, aby ponownie zweryfikować określone ścieżki lub tagi.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}
            

              
                Copy
              
            
          

Zaawansowane Użycie

Mutacja Danych

Server Actions są szczególnie dobrze przystosowane do mutacji danych, takich jak aktualizacja baz danych lub zewnętrznych API. Możesz użyć Server Actions do obsługi złożonych mutacji danych, które wymagają logiki po stronie serwera, takiej jak walidacja danych, wykonywanie obliczeń lub interakcja z wieloma źródłami danych. Rozważmy scenariusz, w którym musisz zaktualizować profil użytkownika i wysłać e-mail z potwierdzeniem. Server Action może obsługiwać zarówno aktualizację bazy danych, jak i proces wysyłania wiadomości e-mail w jednej, atomowej operacji.

Uwierzytelnianie i Autoryzacja

Server Actions mogą być używane do obsługi uwierzytelniania i autoryzacji. Wykonując kontrole uwierzytelniania i autoryzacji na serwerze, możesz mieć pewność, że tylko autoryzowani użytkownicy mają dostęp do wrażliwych danych i funkcji. Możesz użyć Server Actions do obsługi logowania użytkowników, rejestracji i resetowania haseł. Na przykład Server Action może zweryfikować dane uwierzytelniające użytkownika w bazie danych i zwrócić token, który może być używany do uwierzytelniania kolejnych żądań.

Funkcje Edge

Server Actions można wdrażać jako Funkcje Edge, które działają w globalnej sieci serwerów blisko użytkowników. Może to znacznie zmniejszyć opóźnienia i poprawić wydajność, szczególnie dla użytkowników w rozproszonych geograficznie lokalizacjach. Funkcje Edge są idealne do obsługi Server Actions, które wymagają niskich opóźnień, takich jak aktualizacje danych w czasie rzeczywistym lub spersonalizowane dostarczanie treści. Next.js zapewnia wbudowaną obsługę wdrażania Server Actions jako Funkcji Edge.

Strumieniowanie

Server Actions obsługują strumieniowanie, które umożliwia wysyłanie danych do klienta w fragmentach, gdy staną się dostępne. Może to poprawić postrzeganą wydajność aplikacji, szczególnie w przypadku Server Actions, których wykonanie zajmuje dużo czasu. Strumieniowanie jest szczególnie przydatne do obsługi dużych zbiorów danych lub złożonych obliczeń. Na przykład możesz przesyłać strumieniowo wyniki wyszukiwania do klienta podczas ich pobierania z bazy danych, zapewniając bardziej responsywne wrażenia użytkownika.

Najlepsze Praktyki

Oto kilka najlepszych praktyk, których należy przestrzegać podczas korzystania z React Server Actions:

• Utrzymuj Server Actions małe i skoncentrowane: Każda Server Action powinna wykonywać jedno, dobrze zdefiniowane zadanie. Dzięki temu kod jest łatwiejszy do zrozumienia, przetestowania i utrzymania.
• Używaj opisowych nazw: Wybierz nazwy, które wyraźnie wskazują cel Server Action. Na przykład createComment lub updateUserProfile są lepsze niż ogólne nazwy, takie jak processData.
• Waliduj dane na serwerze: Zawsze waliduj dane na serwerze, aby uniemożliwić złośliwym użytkownikom wstrzykiwanie nieprawidłowych danych do aplikacji. Obejmuje to walidację typów danych, formatów i zakresów.
• Obsługuj błędy w sposób elegancki: Użyj bloków try...catch, aby obsługiwać błędy i dostarczać użytkownikowi informacyjne komunikaty o błędach. Unikaj ujawniania poufnych informacji o błędach klientowi.
• Używaj optymistycznych aktualizacji: Zapewnij bardziej responsywne wrażenia użytkownika, aktualizując interfejs użytkownika natychmiast, nawet zanim serwer potwierdzi działanie.
• W razie potrzeby ponownie zweryfikuj dane: Upewnij się, że interfejs użytkownika odzwierciedla najnowsze zmiany, ponownie weryfikując pamięć podręczną danych po mutacji danych przez Server Action.

Przykłady z Życia Wzięte

Rozważmy kilka przykładów z życia wziętych, jak React Server Actions mogą być używane w różnych typach aplikacji:

Aplikacja E-commerce

• Dodawanie produktu do koszyka: Server Action może obsługiwać dodawanie produktu do koszyka użytkownika i aktualizację sumy koszyka w bazie danych. Optymistyczne aktualizacje mogą być używane do natychmiastowego wyświetlania produktu w koszyku.
• Przetwarzanie płatności: Server Action może obsługiwać przetwarzanie płatności za pomocą bramki płatniczej strony trzeciej. Server Action może również aktualizować status zamówienia w bazie danych i wysyłać e-mail z potwierdzeniem do użytkownika.
• Przesyłanie recenzji produktu: Server Action może obsługiwać przesyłanie recenzji produktu i zapisywanie jej w bazie danych. Server Action może również obliczyć średnią ocenę produktu i zaktualizować stronę szczegółów produktu.

Aplikacja Społecznościowa

• Opublikowanie nowego tweeta: Server Action może obsługiwać publikowanie nowego tweeta i zapisywanie go w bazie danych. Server Action może również aktualizować oś czasu użytkownika i powiadamiać jego obserwujących.
• Polubienie posta: Server Action może obsługiwać polubienie posta i aktualizację liczby polubień w bazie danych. Optymistyczne aktualizacje mogą być używane do natychmiastowego wyświetlania zaktualizowanej liczby polubień.
• Obserwowanie użytkownika: Server Action może obsługiwać obserwowanie użytkownika i aktualizację liczby obserwujących i obserwowanych w bazie danych.

System Zarządzania Treścią (CMS)

• Tworzenie nowego wpisu na blogu: Server Action może obsługiwać tworzenie nowego wpisu na blogu i zapisywanie go w bazie danych. Server Action może również wygenerować slug dla posta i zaktualizować mapę witryny.
• Aktualizacja strony: Server Action może obsługiwać aktualizację strony i zapisywanie jej w bazie danych. Server Action może również ponownie zweryfikować pamięć podręczną strony, aby upewnić się, że zaktualizowana treść jest wyświetlana użytkownikom.
• Opublikowanie zmiany: Server Action może obsługiwać publikowanie zmiany w bazie danych i powiadamianie wszystkich subskrybentów.

Uwagi dotyczące Internacjonalizacji

Podczas tworzenia aplikacji dla globalnej publiczności niezbędne jest uwzględnienie internacjonalizacji (i18n) i lokalizacji (l10n). Oto kilka uwag dotyczących używania React Server Actions w aplikacjach zinternacjonalizowanych:

• Obsługa różnych formatów daty i godziny: Użyj API Intl, aby formatować daty i godziny zgodnie z ustawieniami regionalnymi użytkownika.
• Obsługa różnych formatów liczb: Użyj API Intl, aby formatować liczby zgodnie z ustawieniami regionalnymi użytkownika.
• Obsługa różnych walut: Użyj API Intl, aby formatować waluty zgodnie z ustawieniami regionalnymi użytkownika.
• Tłumaczenie komunikatów o błędach: Przetłumacz komunikaty o błędach na język użytkownika.
• Obsługa języków od prawej do lewej (RTL): Upewnij się, że Twoja aplikacja obsługuje języki RTL, takie jak arabski i hebrajski.

Na przykład, podczas przetwarzania formularza, który wymaga wprowadzenia daty, Server Action może użyć API Intl.DateTimeFormat do przeanalizowania daty zgodnie z ustawieniami regionalnymi użytkownika, zapewniając poprawne zinterpretowanie daty niezależnie od ustawień regionalnych użytkownika.

Wniosek

React Server Actions to potężne narzędzie do upraszczania przetwarzania formularzy po stronie serwera i mutacji danych w aplikacjach React. Umożliwiając pisanie kodu po stronie serwera bezpośrednio w komponentach React, Server Actions redukują ilość kodu szablonowego, zwiększają bezpieczeństwo, poprawiają wydajność i umożliwiają optymistyczne aktualizacje. Postępując zgodnie z najlepszymi praktykami opisanymi w tym przewodniku, możesz wykorzystać Server Actions do budowania bardziej solidnych, skalowalnych i łatwych w utrzymaniu aplikacji React. W miarę jak React ewoluuje, Server Actions niewątpliwie będą odgrywać coraz ważniejszą rolę w przyszłości tworzenia stron internetowych.